<template>
  <div class="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row style="position: absolute;right: 70px;z-index: 99;">
       <router-link to="/shoplist/addInfo"> <el-button size="small " type="danger">添加商品</el-button></router-link>
      </el-row>
      <div style="position: absolute;left: 550px;margin-top: -8px; z-index: 99;">
        <el-input placeholder="请输入内容"  class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-tabs v-model="message" @tab-click="onUserList">
        <el-tab-pane :label="`全部(${unread.length})`" name="first">
        </el-tab-pane>
        <el-tab-pane :label="`在售(${read.length})`" name="second">
        </el-tab-pane>
        <el-tab-pane :label="`下线(${recycle.length})`" name="third">
        </el-tab-pane>
        <!--列表-->
        <el-table :data="users" highlight-current-row @selection-change="selsChange" style="width: 100%;">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="商品编号" width="120">
          </el-table-column>
          <el-table-column prop="name" label="商品图片" width="120">
            <template slot-scope="scope">
              <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="150">
          </el-table-column>
          <el-table-column prop="name" label="销售金额" width="120">
          </el-table-column>
          <el-table-column prop="nnn" label="商品类型" width="120">
          </el-table-column>
          <el-table-column prop="nnn" label="销售量(箱)" width="120">
          </el-table-column>
          <el-table-column prop="shopId" label="总产量(箱)" width="120">
          </el-table-column>
          <el-table-column prop="shopId" label="剩余量(箱)" width="120">
          </el-table-column>
          <el-table-column prop="shopId" label="创建时间" width="130">
          </el-table-column>
          <el-table-column prop="shopId" label="开售时间" width="130">
          </el-table-column>
          <el-table-column prop="name" label="结束时间" width="130">
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="goOnline">下架</el-button>
              <el-button size="mini"><router-link to="/shoplist/addInfo">编辑</router-link></el-button>
              <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="margin-top: 25px;">
          <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
          <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total"
            style="float:right;">
          </el-pagination>
        </el-col>

      </el-tabs>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
  import {
    removeUser,
    batchRemoveUser
  } from '@/api/userTable'

  export default {
    data() {
      return {
        message: 'first',
        unread: [{}, {}],
        read: [{}],
        recycle: [{}],
        users: [],
        sels: [],
        total: 0,
        select: ''
      }
    },
    methods: {
      onUserList(tab) {
        console.log('---3232323232', tab, this.stateNum)
        var tap = tab === 1 ? 'first' : tab.name
        console.log('---==========================', tap)
        var n = this.stateNum + 1
        var list = [{
          name: n,
          shopId: 2,
          img: '../static/img/img.jpg',
          nnn: 6666
        }]
        this.users = list
        this.stateNum = n
        this.total = list.length
      },
      // 全选单选多选
      selsChange(sels) {
        this.sels = sels
      },
      // 上线
      goOnline(index) {
        this.$confirm('确认下架该商品？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      },
      // 删除
      handleDel(index, row) {
        this.$confirm('确认删除该商品吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const para = {
              id: row.id
            }
            removeUser(para).then(res => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getUsers()
            })
          })
          .catch(() => {})
      },
      handleCurrentChange(val) {
        this.page = val
        this.getUsers()
      },
      // 批量删除
      batchRemove() {
        var ids = this.sels.map(item => item.id).toString()
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            const para = {
              ids: ids
            }
            batchRemoveUser(para).then(res => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getUsers()
            })
          })
          .catch(() => {})
      }
    },
    mounted() {
      this.onUserList(1)
    }
  }
</script>

<style>
  .message-title {
    cursor: pointer;
  }

  .handle-row {
    margin-top: 30px;
  }
 .el-select .el-input {
    width: 200px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
